Apply 'react-native-safe-area-context' to support Android 15 forced edge-to-edge #84
Conversation
| backgroundColor={backgroundStyle.backgroundColor} | ||
| /> | ||
| <ScrollView | ||
| contentInsetAdjustmentBehavior="automatic" |
There was a problem hiding this comment.
replace iOS only contentInsetAdjustmentBehavior with code that can work on both iOS and Android
|
CC: @cipolleschi, we should discuss offline with @alanleedev. There's possibly a way to put this together where the diff on the upgrade helper will be less noisy. |
| }; | ||
|
|
||
| const contentContainerStyle = { paddingBottom: insets.bottom }; |
There was a problem hiding this comment.
need to add extra padding so when scrolling to the bottom, the content shows above the nav bar without overlap.
| <ScrollView | ||
| contentContainerStyle={contentContainerStyle} | ||
| style={backgroundStyle}> | ||
| <Header badgeTopMargin={insets.top}/> |
There was a problem hiding this comment.
passing in badgeTopMargin to the HermesBadge within Header has proper margin to avoid overlap with top status bar.
Pre-requisite: This code requires updated to react-native with this PR applied: facebook/react-native#47708
|
I don't believe that forcing the We don't want to establish a precedent for libraries to be included in the official template, as we would like not to be opinionated on the libraries that people should use. I'd really really prefer if we can find an alternative way to handle that that does not require that library to be pushed in all the projects. |
| return ( | ||
| <SafeAreaProvider> | ||
| <MainContent /> | ||
| </SafeAreaProvider> | ||
| ); | ||
| } |
There was a problem hiding this comment.
I understand the reason for this, but this will show a huge braking change block in users code that is not really required. Can't we just replace the <SafeAreaView> with <SafeArewProvider>?
@cipolleschi I think we are already made an opinionated anouncement about the library people use in this case. Made an announcement recommending react-native-safe-area-context here -> react-native-community/discussions-and-proposals#827 |
|
Closing in favor of different approach to handle the issue: #85 |
Summary:
Why:
<SafeAreaView/>is iOS only. This becomes an issue for Android 15, where edge-to-edge is mandatory. We should be guiding users how to write good apps to handle this.How:
This change updates the template to show our current recommended pattern for writing apps that are aware of the safe area to layout components.
Changes:
Added react-native-safe-area-context to handle forced ege-to-edge on Android 15
Updating Android targetSdk to 35
Very important note: This PR requires updated to the Header component (PR here) under the
Libraries/NewAppScreenfor it to work, which will have to go out in a release. This change can't land in a-stablebranch until that commit is picked for a branch.Changelog:
[GENERAL] [ADDED] - Added
react-native-safe-area-contextto handle forced ege-to-edge on Android 15[ANDROID] [CHANGED] - Updating Android TargetSdk to 35
Test Plan:
Applied same code to new app created with template, and have captured screenshots:
ios_template_updated.mp4
android_template_updated_api35_3button.mp4
android_template_updated_api35_gesture.mp4
android_template_updated_api34.mp4